<template>
  <a-drawer
    v-model:visible="visible"
    width="500px"
    unmount-on-close
    :title="`权限设置-${currentForm?.formName}`"
    @cancel="close"
  >
    <a-list size="small">
      <template #header>
        <a-row>
          <a-col :span="9">快捷设置</a-col>
          <a-col :span="15">
            <a-radio-group @change="setAllPermission">
              <a-radio value="H">隐藏</a-radio>
              <!--              <a-radio value="R">只读</a-radio>-->
              <a-radio value="D">禁用</a-radio>
              <a-radio value="E">编辑</a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
      </template>

      <a-list-item v-for="(item, index) of currentForm.formItem" :key="index">
        <a-row>
          <a-col :span="9">
            <a-tag color="arcoblue">
              {{ item.name }}
            </a-tag>
          </a-col>
          <a-col :span="15">
            <a-radio-group v-model="currentForm.formPermission[item.id]">
              <a-radio value="H">隐藏</a-radio>
              <!--              <a-radio value="R">只读</a-radio>-->
              <a-radio value="D">禁用</a-radio>
              <a-radio value="E">编辑</a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
      </a-list-item>
    </a-list>

    <template #footer>
      <a-button-group status="normal">
        <a-button
          :loading="loading"
          @click.stop="close"
        >
          <template #icon>
            <icon-close />
          </template>
          取消
        </a-button>
        <a-button
          type="primary"
          :loading="loading"
          @click.stop="saveFormPermission"
        >
          <template #icon>
            <icon-save />
          </template>
          确定
        </a-button>
      </a-button-group>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineExpose } from 'vue';
import { updateForm, SysFrom } from '@/api/system/form';
import { cloneDeep } from 'lodash';
import useLoading from '@/hooks/loading';
import { Message } from '@arco-design/web-vue';

const emits = defineEmits(['submit']);

const { loading, setLoading } = useLoading(false);

const visible = ref(false);

const currentForm = ref<SysFrom>({});

const setAllPermission = (value: string | number | boolean, ev: Event) => {
  Object.keys(currentForm.value.formPermission).forEach(key => {
    currentForm.value.formPermission[key] = value;
  });
};

const saveFormPermission = () => {
  loading.value = true;
  updateForm(currentForm.value).then(res => {
    visible.value = false;
    Message.success('设置成功');
    emits('submit');
  }).finally(() => {
    loading.value = false;
  });
};

const open = (sysForm: SysFrom) => {
  visible.value = true;
  currentForm.value = cloneDeep(sysForm);
  setLoading(false);
};

const close = () => {
  visible.value = false;
};

defineExpose({
  open,
  close
});

</script>

<script lang="ts">
export default {
  name: 'DrawerPermission'
};
</script>

<style scoped>

</style>